<template>
  <div class="cart">
    <div class="left" @click="logoClicked">
      <div class="iconWrapper">
        <div class="logo">
          <i class="iconfont icon-gouwuche"></i>
        </div>
        <div class="ball-container">
            <transition v-for="(ball, index) in balls" :key="'key' + index"  @beforeEnter="beforeEnter" @afterEnter = "afterEnter" @enter="enter">
              <div class="ballWrapper" v-show="ball.show">
                <div class="ball"></div>
              </div>
            </transition>
        </div>
        <div class="num" v-if="count > 0">{{count}}</div>
      </div>
      <div class="cost">{{formatCurrency(cost)}}</div>
      <div class="other" >{{peisong}}</div>
    </div>
    <div class="right" v-if="count < 1" >
      ￥20元起送
    </div>
    <div class="right green" v-else @click="checkOut">
      去结算
    </div>

    <transition name="panel">
      <cart-itemlist v-show="show" class="cartItemList1" :items="itemsInCart"></cart-itemlist>
    </transition>
  </div>
</template>

<script>
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
    import cartItemList from './cartItemList.vue'
    export default {
        components: {
          'cart-itemlist': cartItemList
        },
        props:{
          count: {
            type: Number,
            required: true
          },
          cost: {
            type: Number,
            required: true
          },
          peisong: {
            type: String,
            required: true
          }
        },
        data () {
          return {
            balls: [{show: false}, {show: false} , {show: false}, {show: false}, {show: false}],
            dropBalls: [],
            show: false
          };
        },
        computed: {
          ...mapGetters(['costOfItemInCart', 'itemsInCart','countOfItemInCart']),
        },

        methods: {
          ...mapActions(['clearCart']),
          drop: function (target) {
            for( let i = 0; i < this.balls.length; i++){
              let ball = this.balls[i]
              if( !ball.show ){
                ball.addButton = target
                ball.show = true
                this.dropBalls.push(ball)
//                console.log('drop')

                return
              }
            }
          },
          beforeEnter: function(el) {
//            console.log(`beforeEnter,display = ${el.style.display}`)
            let count = this.balls.length
            while(count--) {
              let ball = this.balls[count]
              if (ball.show) {
                let rect = ball.addButton.getBoundingClientRect();
                let x = rect.left - 32;
                let y = -(window.innerHeight - rect.top - (16+20+10));

//                只有显示状态下设置transform初始值才有效
                el.style.display = ''
                el.style.webkitTransform = `translate3d(0, ${y}px,0)`;
                el.style.transform = `translate3d(0, ${y}px, 0)`;

                let inner = el.getElementsByClassName('ball')[0]
                inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
                inner.style.transform = `translate3d(${x}px, 0, 0)`;
              }
            }
          },
          enter: function (el) {
//            console.log(`enter,display = ${el.style.display}`)
//            延迟17ms才能确保触发过渡
            setTimeout(() => {
              el.style.webkitTransform = 'translate3d(0,0,0)'
              el.style.transform = 'translate3d(0,0,0)'

              let inner = el.getElementsByClassName('ball')[0]
              inner.style.webkitTransform = `translate3d(0, 0, 0)`;
              inner.style.transform = `translate3d(0, 0, 0)`;
            }, 17)

          },
          afterEnter: function (el) {
//            console.log('afterEnter')

            let ball = this.dropBalls.shift();
            if (ball) {
              ball.show = false;
              el.style.display = 'none'
            }
          },
          logoClicked: function () {
            if(this.countOfItemInCart > 0) {
              this.show = !this.show
              this.$emit('click', this.show)
            }
          },
          checkOut: function () {
            console.log('checkOut')
            let vm = this
            let options = {
              okText: '支付',
              cancelText: '取消',
            }
            this.$dialog.confirm('您的商品共 ' + this.formatCurrency(this.costOfItemInCart), options)
              .then(function () {
                console.log('Clicked on proceed')
                vm.clearCart()
              })
              .catch(function () {
                console.log('Clicked on cancel')
              });
          }
        }
    }
</script>

<style lang="scss" scoped>
  .cart{
    flex-basis: 56px;
    display: flex;

    .left{
      flex: 1;
      background: #141d27;
      box-sizing: border-box;

      .iconWrapper{
        display: inline-block;
        vertical-align: top;
        width: 56px;
        height: 100%;
        margin: 0 12px;
        padding: 6px;

        position: relative;
        top: -10px;
        border-radius: 50%;
        background-color: #141d27;

        .logo {
          /*父元素采用box-sizing:border-box时，子元素width和height 100%不包括padding*/
          width: 100%;
          height: 100%;

          border-radius: 50%;
          background-color: #00a0dc;

          text-align: center;
          i {
            line-height: 44px;
            font-size: 24px;
            color: #fff;
          }
        }
        .ball-container{
          width: 16px;
          height: 16px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;

          .ballWrapper {
            position: fixed;
            z-index: 200;
            transition: all .617s cubic-bezier(0.49, -0.79, 0.75, 0.41);

            .ball {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background-color: rgb(0, 160, 220);
              /*background-color: red;*/

              transition: all .617s linear
            }
          }
        }
        .num{
          width: 24px;
          height: 24px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: 50%;
          background-color: #f01414;

          font-size: 9px;
          font-weight: 700;
          color: #fff;
          line-height: 24px;
          text-align: center;
        }
      }
      .cost{
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        font-weight: 700;
        line-height: 56px;
        color: #fff;

        padding-right: 12px;
        border-right: 1px solid rgba(255,255,255,0.1);
      }
      .other{
      display: inline-block;
      vertical-align: top;
      line-height: 56px;
      font-size: 10px;

      padding-left: 12px;

      color: rgba(255,255,255,0.4);
    }
    }
    .right{
      flex-basis: 105px;

      font-size: 12px;
      line-height: 56px;
      color: rgba(255,255,255,0.4);
      text-align: center;

      background: #2b333b;
    }
    .green{
      background: #00b43c;
      color: #fff;
    }


    .cartItemList1{
      z-index: -1;
      transform: translateY(-100%);

      position: absolute;
      left: 0;
      right: 0;
    }
    .panel-enter-active, .panel-leave-active {
      transition: all .6s linear;
    }
    .panel-enter, .panel-leave-active {
      transform: translateY(0);
    }
  }
</style>
